<template>
    <div>
        <!-- 页面头部导航 -->
        <el-page-header content="已投递简历" icon="" title="就业管理系统" />

        <!-- 简历列表与编辑区域布局 -->
        <el-row :gutter="20" class="el-row">
            <!-- 左侧简历列表区域（占6列） -->
            <el-col :span="6">
                <el-card class="box-card">
                    <!-- 遍历显示用户投递的简历列表 -->
                    <div v-for="item in state.Cvs">
                        <div class="mb-4">
                            <!-- 简历标题按钮，点击切换选中简历 -->
                            <el-button :key="item.title" type='' @click="clickCv(item.id)">
                                {{ item.title }}
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>

            <!-- 右侧简历详情与评价区域（占18列） -->
            <el-col :span="18">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>编辑简历</span>
                        </div>
                    </template>

                    <!-- 简历详情表单（非可编辑，展示信息） -->
                    <el-form ref="userFormRef" :model="userForm" :rules="userFormRules" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="标题" prop="title">
                            {{ state.userForm.title }} <!-- 显示简历标题 -->
                        </el-form-item>
                        <!-- 以下为简历各字段信息展示 -->
                        <el-form-item label="求职意向" prop="job_prefer">
                            {{ state.userForm.job_prefer }}
                        </el-form-item>
                        <el-form-item label="培训经历" prop="education_exp">
                            {{ state.userForm.education_exp }}
                        </el-form-item>
                        <el-form-item label="项目经历" prop="project_exp">
                            {{ state.userForm.project_exp }}
                        </el-form-item>
                        <el-form-item label="实习经历" prop="internship">
                            {{ state.userForm.internship }}
                        </el-form-item>
                        <el-form-item label="获奖经历" prop="price">
                            {{ state.userForm.price }}
                        </el-form-item>
                        <el-form-item label="其他优势" prop="other_advantage">
                            {{ state.userForm.other_advantage }}
                        </el-form-item>

                        <!-- 简历文件链接 -->
                        <el-form-item label="简历" prop="cv">
                            <el-link @click="handleCv(state.userForm.cvURL)">{{ state.userForm.cvURL }}</el-link>
                        </el-form-item>

                        <!-- 评价与建议输入 -->
                        <el-form-item label="评价与建议" prop="advice">
                            <el-input v-model="state.advice" /> <!-- 输入建议内容 -->
                        </el-form-item>
                        <!-- 提交评价按钮 -->
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(state.userForm.id)">提交评价</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>

        <!-- 简历文件预览弹窗 -->
        <el-dialog v-model="dialogVisible" width="80%">
            简历存储地址：{{ state.userForm.cvURL }} <br>
            复制简历地址直接粘贴至浏览器地址栏即可访问
        </el-dialog>
    </div>
</template>

<script setup>
import { useStore } from "vuex";
import { computed, ref, reactive, onBeforeMount } from "vue";
import axios from 'axios'
import { ElMessage } from "element-plus";
import router from "@/router";
import { useRoute } from "vue-router";

// 获取当前路由参数
const route = useRoute();
// 初始化Vuex存储
const store = useStore();
// 控制弹窗显示状态
let dialogVisible = ref(false);
// 表单引用
const userFormRef = ref();

// 组件状态管理
let state = reactive({
    userForm: { // 选中简历的详细信息
        id: '',
        title: '',
        job_prefer: '',
        education_exp: '',
        project_exp: '',
        internship: '',
        price: '',
        other_advantage: '',
        cvURL: '',
    },
    advice: '', // 评价建议内容
    Cvs: [], // 已投递的简历列表
    SystemCurrentPath: '' // 系统文件存储路径
});

/**
 * 组件挂载前钩子：获取已投递简历数据
 */
onBeforeMount(async () => {
    await getCvs(); // 调用获取简历数据的函数
});

/**
 * 提交评价处理函数
 * @param {string} id - 选中简历的ID
 */
const submitForm = async (id) => {
    if (state.advice !== '' && id !== '') {
        // 根据简历ID和信息ID查询投递记录
        const temp = await axios.get(`/postRecord/findByCv_idAndArticle_id?cv_id=${state.userForm.id}&article_id=${route.params.id}`);
        const recordId = temp.data.data.id; // 获取投递记录ID
        // 更新投递记录中的评价建议
        const res = await axios.post(`/postRecord/updateById?id=${recordId}&advice=${state.advice}`);
        
        if (res.data.code === 0) {
            ElMessage.success("建议已提交");
            ElMessage("请稍候，正在更新数据");
            location.reload(); // 刷新页面更新数据
        }
    } else if (id !== '') {
        ElMessage.error("请输入评价建议");
    } else {
        ElMessage.error("请选择一个简历并输入建议");
    }
};

/**
 * 获取已投递简历数据函数
 */
const getCvs = async () => {
    // 获取系统文件存储路径（用于拼接简历文件URL）
    state.SystemCurrentPath = await axios.get("/picture/getCurrentPath");
    
    // 模拟初始简历数据（实际从接口获取）
    state.Cvs = [/* 初始模拟数据 */];
    
    // 根据当前信息ID获取对应的投递记录
    const form = await axios.get(`/postRecord/findByArticle_id?article_id=${route.params.id}`);
    const Cv_ids = form.data.data.map(item => item.cv_id); // 提取简历ID数组
    
    ElMessage("正在获取数据，请稍候");
    const CvsOfThis = [];
    // 批量获取每个简历的详细信息
    for (let i = 0; i < Cv_ids.length; i++) {
        CvsOfThis[i] = (await axios.get(`/cv/findById?id=${Cv_ids[i]}`)).data.data;
    }
    state.Cvs = CvsOfThis; // 更新简历列表
};

/**
 * 点击简历标题处理函数（切换选中简历）
 * @param {string} id - 简历ID
 */
const clickCv = (id) => {
    const targetCv = state.Cvs.find(item => item.id === id); // 查找目标简历
    if (targetCv) {
        // 更新表单数据为选中简历的信息
        state.userForm = {
            ...targetCv,
            cvURL: state.SystemCurrentPath.data + "/" + targetCv.cvURL // 拼接完整文件路径
        };
    }
};

/**
 * 处理简历链接点击事件（打开弹窗显示文件路径）
 * @param {string} filePath - 简历文件路径
 */
const handleCv = (filePath) => {
    dialogVisible.value = true; // 显示弹窗
};
</script>

<style scoped lang="scss">
.el-row {
    margin-top: 20px;
    .box-card {
        text-align: center;
    }
}

.el-link {
    margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}

/* 弹窗内文件路径显示样式 */
.el-dialog {
    padding: 20px;
    text-align: left;
}
</style>